<template>
	<view class="content">
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="dream约文" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<view class="add_item">
			<view class="title">
				标签名称
			</view>
			<input class="dec" v-model="dec" type="text" placeholder="王守仁，汉族，幼名云，字伯安，号阳明。"/>
		</view>
		<view class="add_item">
			<view class="title">
				标签名称
			</view>
			<input class="dec" v-model="dec" type="text" placeholder="王守仁，汉族，幼名云，字伯安，号阳明。"/>
		</view>
		<view class="add_item">
			<view class="title">
				标签说明
			</view>
			<textarea name="" id="" cols="30" rows="10" class="dec">
				王守仁，汉族，幼名云，字伯安，号阳明，封新建伯，谥文成，人称王阳明。明代最著名的思想家、文学家、哲学家和军事家。王阳明不仅是宋明心学的集大成者，一生事功也是赫赫有名，故称之为“真三不朽”其学术思想在中国、日本、朝鲜半岛以及东南亚国家乃至全球都有重要而深远的影响，因此，王守仁和孔子、孟子、朱熹并称为孔、孟、朱、王。
			</textarea>
		</view>
		<view class="tip_wrap">
			<view class="tip">
				添加须知：
			</view>
			<view class="tip">
				1、请完成标签的名称、所属分类和详细说明的填写；
			</view>
			<view class="tip">
				2、所有内容填写完成后，点击确认申请即可进行标签增加申请；
			</view>
			<view class="tip">
				3、标签增加申请通过后，我们会用平台内通知的方式告知结果。
			</view>
		</view>
		
		<view class="footer">
			<button class="btn" @click="$go('/showcase/tip/tip')">取消创建</button>
			<button class="btn">新建标签</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				dec:''
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.content {
	  padding: 20rpx 30rpx;
	  .add_item{
		  .title{
			 font-size: 32rpx;
			 font-weight: bold;
			 color: #3D3D3D; 
			 margin-left: 36rpx;
			 position: relative;
			 &::before{
				 content: '';
				 width: 4rpx;
				 height: 32rpx;
				 border-radius: 96rpx;
				 background: #45C4B0;
				 position: absolute;
				 left: -16rpx;
				 top: 6rpx;
			 }
		  }
		  .dec{
			  display: block;
			  width: 100%;
			  margin: 20rpx 0 40rpx;
			  padding: 20rpx;
			  box-sizing: border-box;
			  border-radius: 8rpx;
			  background: rgba(216, 216, 216, 0.3);
			  font-size: 28rpx;
			  color: #999999;
			  min-height: 72rpx;
		  }
	  }
	  .tip_wrap{
		  margin-top: -20rpx;
		  font-size: 20rpx;
		  color: #999999;
	  }
	  .footer{
		  width: 100%;
		  height: 100rpx;
		  background: #FFFFFF;
		  position: fixed;
		  bottom: 0;
		  left: 0;
		  right: 0;
		  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
		  display: flex;
		  justify-content: space-around;
		  align-items: center;
		  .btn{
			  width: 300rpx;
			  height: 72rpx;
			  line-height: 72rpx;
			  font-size: 14px;
			  font-weight: bold;
			  border-radius: 8rpx;
			  &:nth-child(1){
				  background-color:rgba(216, 216, 216, 0.3) !important;
				  color: #999999;
			  }
			  &:nth-child(2){
				  background-color: #45C4B0 !important;
				  color: #FFFFFF;
			  }
		  }
	  }
	}
</style>
